<ng-container *ngIf="chartData?.length">
  <isData [noDataIf]="false">
    <as-split direction="vertical" [gutterSize]="5">
      <as-split-area [size]="40" *ngIf="chartData?.length">
        <flexible-chart
          [data]="chartData"
          typeOfChart="bar"
          [isRange]="false"
          [options]="{
            axisX: true,
            axisY: true
          }"
        ></flexible-chart>
      </as-split-area>

      <as-split-area [size]="60" *ngIf="chartData?.length">
        <isData [noDataIf]="!data?.length">
          <h1>{{ title }}</h1>
          <!-- <mat-card> -->
          <cdk-virtual-scroll-viewport
            [itemSize]="18"
            style="height: calc(100% - 4rem); min-height: 200px; width: 100%"
          >
            <div
              *cdkVirtualFor="let item of data; let odd = odd"
              [ngStyle]="
                (odd && { 'background-color': 'rgba(0,0,0,0.07)' }) || {}
              "
              style="
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
              "
            >
              <div
                *ngFor="let col of getKeys(item); let idx = index"
                [style.flex]="idx === 3 ? 3 : 1"
                style="
                  margin-top: -1px;
                  margin-left: -1px;
                  width: 10%;
                  min-width: 200px;
                  padding: 0.5rem;
                  border: 1px solid #999;
                "
              >
                {{ col }}:{{ item[col] | json }}
              </div>
            </div>
          </cdk-virtual-scroll-viewport>
          <!-- </mat-card> -->
        </isData>
      </as-split-area>
    </as-split>
  </isData>
</ng-container>
